import '../../css/reviewer/logItem.scss'
import React, { useEffect, useState } from 'react';
import { Button, Input, Table, Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import { reviewerLog } from '../../api/reviewer/reviewer'
const ReviewerLog = () => {
  // 定义列表数据类型
  interface DataType {
    key: React.Key;
    id: string,
    v_id: string,
    name: string,
    openid: string,
    username: string,
    addtime: string,
  }
  // 定义分页查询数据类型
  interface IJournal {
    page: number
    pageSize: number
    idorname?: string
  }

  // 查询关键字
  const [input,setInput] = useState()
  //  分页数据
  const [params, setParams] = useState<IJournal>({ page: 1, pageSize: 10 })
  // 定义分页的总条数
  let [total, setTotal] = useState(0)
  // 列表标题
  const columns: ColumnsType<DataType> = [
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center'
    },
    {
      title: ' 访客人姓名',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '核销人姓名',
      dataIndex: 'username',
      align: 'center'
    },
    {
      title: '核销时间',
      dataIndex: 'addtime',
      align: 'center'
    },
  ];

  // 列表数据
  const [data, stedata] = useState<any>()

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 下拉选择
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  // 列表接口
  const reviewerLogInfo = async () => {
    const res = await reviewerLog(params )
    console.log(res);
    setTotal(res.data.total)
    stedata(res.data.data)
  }

  // 分页
  const onChangePage = (page: number, pageSize: number) => {
    console.log('Page: ', page, pageSize);
    setParams({ ...params, page, pageSize })
  };

  // 获取文本值
  const changeInput =(e:any)=>{
    setInput(e.target.value)
  }
  // 查询
  const Search = async(input:any) => {
    const res = await reviewerLog({idorname:input})
    console.log(res);
    setTotal(res.data.total)
    stedata(res.data.data)
  }

    // 回车查询
    const onkeyup =(e:any)=>{
      // console.log(e);
      if(e.keyCode===13){
        Search(input)
      }
    }

  // 请求接口
  useEffect(() => {
    reviewerLogInfo()
  }, [params])
  return (<>
    <div className="LogInfo">
      <div className='log_head'>
        <Input onChange={changeInput} onKeyUp={onkeyup} value={input} style={{ width: '170px' }} placeholder="请输入核检人姓名" />
        <Button style={{ width: '60px' }} type="primary" onClick={() => Search(input)}>查询</Button>
      </div>

      {/* 表格 */}
      <div className='log_table'>
        <Table rowKey="id" bordered pagination={false} rowSelection={rowSelection} columns={columns} dataSource={data} />
      </div>

      {/* 分页 */}
      <div className='pagination'>
        <Pagination
          showSizeChanger
          // current={1}
          onChange={onChangePage}
          total={total}
          pageSizeOptions={['5', '10', '15', '20']}
          showTotal={total => `共${total}条数据`}
        />
      </div>
    </div>
  </>);
}

export default ReviewerLog;